<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CMS供应商后台图库管理</title>
    <link type="text/css" href="/supplier/public/pc/css/supplier_pub.css" rel="stylesheet">
    <link type="text/css" href="/supplier/public/pc/css/supplier_back.css" rel="stylesheet">
    <link type="text/css" href="/supplier/public/pc/css/photo_style.css" rel="stylesheet">
    {Common::js("jquery.min.js,common.js,choose.js,layer/layer.js")}
    <link type="text/css" href="/tools/js/artDialog/css/ui-dialog.css" rel="stylesheet" />
    <link type="text/css" href="/tools/js/msgbox/msgbox.css" rel="stylesheet" />
    <script type="text/javascript" src="/tools/js/artDialog/dist/dialog-plus.js"></script>
    <script type="text/javascript" src="/tools/js/msgbox/msgbox.js"></script>
</head>
<body>
<div class="photo-manage-wrap">
    <div class="block-search-bar clearfix">
        <input type="button" class="return-btn btn btn-default ml-5 pm-search-btn w80 fl mr-10 hide" value="返回" onclick="get_photo(0)">
        <div class="fl select-box w105">
            <select name="photo_type" size="1" class="select">
                <option value="0">全部</option>
                <option value="1">文件夹</option>
                <option value="2">图片</option>
            </select>
        </div>
        <div class="fl ml-10">
            <input type="text" class="input-text w200 keyword" placeholder="文件夹名称/图片名称" value="">
            <input type="button" class="btn btn-default ml-5 pm-search-btn w80" value="查询">
        </div>
        <div class="fr">
            <a href="javascript:;" class="choose-btn" onclick="upload_images()">上传图片</a>
            <a href="javascript:;" class="choose-btn" onclick="add_photo()">创建相册</a>
            <a href="/supplier/pc/gallery/recycle_bin/" class="choose-btn">回收站</a>
            <a href="javascript:;" class="choose-btn" onclick="refresh_photo()">刷新</a>
        </div>
    </div>
    <div class="photo-manage-content">
        <input type="hidden" name="level" value="2">
        <input type="hidden" name="group_id" value="">
        <ul class="recycle-list clearfix">
            
        </ul>
    </div>
    <div class="hide add-photo">
        <ul class="clearfix" style="padding: 30px 20px">
            <li>
                <label>
                    相册名称：<input type="text" class="input-text photo-name w200"/>
                </label>
            </li>
        </ul>
    </div>
</div>
<!-- 内容 -->


<script>
    $(function(){
        get_photo(0);
    })

    function refresh_photo()
    {
        $('.keyword').val();
        $("[name='photo_type']").find('option').eq(0).prop('selected', true);
        var group_id = $("[name='group_id']").val();
        $('.recycle-list').html('');
        get_photo(group_id);
    }

    //获取相册信息
    function get_photo(group_id)
    {
        if(group_id===0){
            $('.return-btn').addClass('hide');
            $("[name='level']").val(2);
            $('.recycle-list').html('');
        }
        var level = $("[name='level']").val();
        $.ajax({
            type: 'post',
            url: '/supplier/pc/gallery/ajax_get_photo',
            data: {level:level},
            dataType: 'json',
            success: function (res) {
                if(res.length>0){
                    for(var i=0;i<res.length;i++){
                        assemble_photo(res[i]);
                    }
                }
                if(group_id){
                    $.ajax({
                        type: 'post',
                        url: '/supplier/pc/gallery/ajax_get_photo_img',
                        data: {group_id:group_id},
                        dataType: 'json',
                        success: function (res) {
                            if(res.length>0){
                                for(var i=0;i<res.length;i++){
                                    assemble_photo_img(res[i]);
                                }
                            }
                        }
                    })
                }
            }
        })
    }

    //组装相册
    function assemble_photo(data)
    {
        var html = '<li>';
        html += '<i class="choice-ico" onclick="delete_photo('+data.group_id+',$(this))"></i>';
        html += '<div class="photo-img" onclick="enter_photo('+data.group_id+')"><img src="/supplier/public/pc/images/nopic.gif" alt=""></div>';
        html += '<div class="photo-name mt-10">';
        html += '<input type="text" class="input-text" data-id="'+data.group_id+'" placeholder="请填写相册名称" value="'+data.group_name+'" onchange="update_name('+data.group_id+',$(this))">';
        html += '</div>';
        html += '</li>';

        $('.recycle-list').append(html);
    }

    //组装图片
    function assemble_photo_img(data)
    {
        var html = '<li>';
        html += '<i class="choice-ico" onclick="delete_photo_img('+data.id+',$(this))"></i>';
        html += '<div class="photo-img"><img src="'+data.url+'" alt=""></div>';
        html += '<div class="photo-name mt-10">';
        html += '<input type="text" class="input-text " placeholder="请填写图片名称" value="'+data.image_name+'" onchange="update_img_name('+data.id+',$(this))">';
        html += '</div>';
        html += '</li>';

        $('.recycle-list').append(html);
    }

    //修改相图片名称
    function update_img_name(img_id,obj)
    {
        var image_name = obj.val();
        $.ajax({
            type: 'post',
            url: '/supplier/pc/gallery/ajax_update_img_name',
            data: {img_id:img_id,image_name:image_name},
            dataType: 'json',
        })
    }

    //删除图片
    function delete_photo_img(img_id,obj)
    {
        layer.confirm('确定删除该图片吗？', {
            btn: ['确定','取消'],
            yes: function (index) {
                $.ajax({
                    type: 'post',
                    url: '/supplier/pc/gallery/ajax_delete_photo_img',
                    data: {img_id:img_id},
                    dataType: 'json',
                    success: function (res) {
                        if(res.status){
                            obj.parent().remove();
                        }else{
                            layer.msg(res.msg);
                        }
                    }
                })
                layer.close(index);
            }
        });
    }

    //进入相册
    function enter_photo(group_id)
    {
        var level = $("[name='level']").val();
        $("[name='level']").val(ST.Math.add(level,1));
        $('.recycle-list').html('');
        $("[name='group_id']").val(group_id);
        $('.return-btn').removeClass('hide');
        get_photo(group_id);
    }

    //添加相册
    function add_photo()
    {
        var level = $("[name='level']").val();
        if(level>2){
            layer.msg('不可在相册中添加子级相册');
            return false;
        }
        layer.open({
            type: 1,
            title: '创建相册',
            skin: 'layui-layer-rim', //加上边框
            area: ['310px', '200px'], //宽高
            btn: ['确定', '取消'],
            content: $('.add-photo').html(),
            yes: function(index, layero){
                var photo_name = $(layero).find('.photo-name').val();
                if(photo_name === ''){
                    layer.msg('请填写相册名称');
                }else{
                    var group_id = $("[name='group_id']").val();
                    $.ajax({
                        type: 'post',
                        url: '/supplier/pc/gallery/ajax_add_photo',
                        data: {photo_name:photo_name,group_id:group_id,level:level},
                        dataType: 'json',
                        success: function (res) {
                            if(res.status){
                                assemble_photo(res)
                                layer.close(index);
                            }else{
                                layer.msg(res.msg);
                            }
                        }
                    })
                }
            }
        });
    }

    //删除相册
    function delete_photo(group_id,obj)
    {
        layer.confirm('确定删除该相册吗？', {
            btn: ['确定','取消'],
            yes: function (index) {
                $.ajax({
                    type: 'post',
                    url: '/supplier/pc/gallery/ajax_delete_photo',
                    data: {group_id:group_id},
                    dataType: 'json',
                    success: function (res) {
                        if(res.status){
                            obj.parent().remove();
                        }else{
                            layer.msg(res.msg);
                        }
                    }
                })
                layer.close(index);
            }
        });
    }

    //修改相册名称
    function update_name(id,obj)
    {
        var name = obj.val();
        $.ajax({
            type: 'post',
            url: '/supplier/pc/gallery/ajax_update_name',
            data: {group_id: id,name: name},
            dataType: 'json',
        })
    }

    //上传图片
    function upload_images()
    {
        ST.Util.showBox('上传图片', '/plugins/upload_image/image/insert_view?type=1', 900, 440, null, null, document, {
            loadWindow: window,
            loadCallback: Insert
        });

        function Insert(result, bool) {
            refresh_photo();
        }
    }
</script>
</body>
</html>
